import React from 'react';
import { connect } from 'dva';
import { ListView, Icon, Badge } from 'antd-mobile';
import avatar from '../../../../../framework/utils/avatar';
import { cutString } from '../../../../../framework/utils/cutStr';
import styles from './messageListItem.css';
import date from '../../../../../framework/utils/date';

const announce = require('../../../../../icons/message/announce.png');

const MessageListItem = ({
  item={},
  onViewMember=()=>{},
  showLimit=()=>{},
}) => {

  //时间对比
  const timeContrast =(previousModifiedTime,lastModifiedTime)=>{

    if(!previousModifiedTime && !lastModifiedTime){
      return;
    }
    let newPreviousModifiedTime = 0;
    let newLastModifiedTime = 0;
    if(previousModifiedTime.indexOf('-') > 0 && lastModifiedTime.indexOf('-') > 0){
      newPreviousModifiedTime = Date.parse(previousModifiedTime.replace(new RegExp(/-/gm), "/"));
      newLastModifiedTime = Date.parse(lastModifiedTime.replace(new RegExp(/-/gm), "/"));
    }else{
      newPreviousModifiedTime = Date.parse(previousModifiedTime);
      newLastModifiedTime = Date.parse(lastModifiedTime);
    }
    if(newLastModifiedTime > newPreviousModifiedTime){
      return (
        <i className={styles.newMessageRedPoint}></i>
      )
    }
  }

  return (
    <div key={item.id} >
      <div className={styles.content}>
        <div className={styles.avatar} onClick={() => showLimit(item.id)}>
          {avatar(item.typeName, announce)}
          {timeContrast(item.previousModifiedTime, item.lastModifiedTime)}
        </div>
        <div className={styles.detail} onClick={() => onViewMember(item.id)}>
          <div className={styles.item}>
            <div className={styles.name}>
              公告
            </div>
            <div className={styles.distance}>
              {item.createdTime ? date.delta(item.createdTime) : ""}
            </div>
          </div>
          <div className={styles.item}>
            <span style={{color:'#999999', fontSize:'0.75em'}}>有新公告消息</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default connect()(MessageListItem);
